<template>
  <div class="sample-register content">
    <HeaderView />

    <ContentHeaderWithTitle title="送样登记" />

    <div class="unit-card-wrapper">
      <unit-card
        tag="院内"
        title="北京石油地质实验研究中心"
        name="王晓蕾"
        phone="18615508558"
        email="wangxiaolei@cnpc.com.cn"
        :is-active="true"
      />

      <div class="i-text-btn">更改送检单位</div>
    </div>

    <div class="form-wrapper i-form">
      <div class="i-h3">样品登记信息</div>

      <van-form @submit="onSubmit" label-align="top">
        <van-field
          v-model="result"
          readonly
          name="picker"
          label="样品类别"
          placeholder="请选择类别"
          @touchstart.stop="showPicker = true"
          :required="true"
        >
          <template #right-icon>
            <span class="material-symbols-outlined"> arrow_drop_down </span>
          </template>
        </van-field>
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>

        <van-field
          readonly
          name="picker"
          label="检测项目"
          :placeholder="result1 && result1.length ? '' : '请选择检测项目'"
          @touchstart.stop="showPicker1 = true"
          :required="true"
        >
          <template #right-icon>
            <div class="multi-value-wrapper">
              <div
                class="multi-value"
                v-for="(item, index) in result1"
                :key="item"
              >
                {{ item?.text }}
                <span
                  class="close-btn"
                  @touchstart.stop="() => handleClickClose(item, index)"
                >
                  <span class="material-symbols-outlined"> close </span>
                </span>
              </div>
            </div>
            <span class="material-symbols-outlined"> arrow_drop_down </span>
          </template>
        </van-field>
        <van-popup v-model:show="showPicker1" position="bottom">
          <van-multi-picker
            :onCancel="() => (showPicker1 = false)"
            :onConfirm="handleConfirm1"
            :columns="[
              { text: '项目1', value: 'a' },
              { text: '项目2', value: 'b' },
            ]"
          />
        </van-popup>

        <van-field
          v-model="result2"
          readonly
          name="picker"
          label="样品状态"
          placeholder="请选择样品状态"
          @touchstart.stop="showPicker2 = true"
        >
          <template #right-icon>
            <span class="material-symbols-outlined"> arrow_drop_down </span>
          </template>
        </van-field>
        <van-popup v-model:show="showPicker2" position="bottom">
          <van-picker
            :columns="[
              { text: '状态1', value: 'a' },
              { text: '状态2', value: 'b' },
            ]"
            @confirm="handleConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>

        <van-field
          v-model="result3"
          readonly
          name="picker"
          label="样品地区"
          placeholder="请选择样品地区"
          @touchstart.stop="showPicker2 = true"
        >
          <template #right-icon>
            <span class="material-symbols-outlined"> arrow_drop_down </span>
          </template>
        </van-field>
        <van-popup v-model:show="showPicker3" position="bottom">
          <van-picker
            :columns="[
              { text: '地区1', value: 'a' },
              { text: '地区2', value: 'b' },
            ]"
            @confirm="handleConfirm3"
            @cancel="showPicker3 = false"
          />
        </van-popup>

        <van-field
          name="radio"
          label="样品送达"
          :required="true"
          class="no-bordered"
        >
          <template #input>
            <VanH5Radio
              :value="checked"
              :onChange="(value) => (checked = value)"
              :items="[
                { label: '邮寄', value: 'a' },
                { label: '自取', value: 'b' },
              ]"
            />
          </template>
        </van-field>

        <div class="addr-card">
          <div class="addr-content">
            <p>王洋 18636368969</p>
            <p>北京市海淀区学院路20号实验一区116号房间</p>
          </div>
          <div class="copy-icon">
            <span class="material-symbols-outlined"> content_copy </span>
          </div>
        </div>

        <van-field
          name="radio"
          label="样品送达"
          :required="true"
          class="no-bordered"
        >
          <template #input>
            <VanH5Radio
              :value="checked2"
              :onChange="(value) => (checked = value)"
              :items="[
                { label: '邮寄到付', value: 'a' },
                { label: '放弃', value: 'b' },
                { label: '自取', value: 'c' },
              ]"
            />
          </template>
        </van-field>
        <div class="van-form-help--info">
          提示：选择邮寄后，我们会把样品邮寄回送样单位
        </div>

        <van-field
          v-model="remark"
          rows="3"
          autosize
          label="备注"
          type="textarea"
          placeholder=""
        />

        <div class="form-footer">
          <van-button
            type="primary"
            block
            color="#0571b0"
            style="border-radius: 0"
            >下一步</van-button
          >
          <van-button
            plain
            type="primary"
            block
            color="#0571b0"
            style="border-radius: 0; border-color: #ddd"
            >保存到草稿</van-button
          >
        </div>
      </van-form>
    </div>

    <CardView />
    <FooterView />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import HeaderView from '@/components/Layout/HeaderView.vue'
import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue'
import ContentHeaderWithTitle from '@/components/ContentHeaderWithTitle.vue'
import VanMultiPicker from '@/components/Form/VanMultiPicker.vue'
import UnitCard from './UnitCard'
import VanH5Radio from '@/components/Form/VanH5Radio.vue'
import HeaderView from '@/components/Layout/HeaderView.vue';

const result = ref('')
const result1 = ref([
  {
    text: '项目1',
    value: 'a',
  },
])
const result2 = ref('')
const result3 = ref('')
const showPicker = ref(false)
const showPicker1 = ref(false)
const showPicker2 = ref(false)
const showPicker3 = ref(false)
const checked = ref('a')
const checked2 = ref('a')
const remark = ref('')
const columns = [
  { text: '类别1', value: 'a' },
  { text: '类别2', value: 'b' },
]

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text
  showPicker.value = false
}

const handleConfirm1 = (value) => {
  result1.value = value
}
const handleConfirm2 = ({ selectedOptions }) => {
  result2.value = selectedOptions[0]?.text
  showPicker2.value = false
}
const handleConfirm3 = ({ selectedOptions }) => {
  result3.value = selectedOptions[0]?.text
  showPicker3.value = false
}

const handleClickClose = (item, index) => {
  result1.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.sample-register {
  .unit-card-wrapper {
    width: calc(100% - dpi(8rem));
    margin: dpi(-11rem) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .i-text-btn {
      margin-top: dpi(2rem);
    }
  }

  .form-wrapper {
    width: calc(100% - dpi(8rem));
    margin: dpi(2rem) auto 0;
  }

  .addr-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    height: dpi(13rem);
    padding: dpi(2.2rem) dpi(3rem);

    .addr-content {
      line-height: 20px;

      p {
        margin: 0;
        font-family: PingFangSC-Regular;
        font-size: dpi(2rem);
        line-height: dpi(3rem);
        letter-spacing: 0px;
        color: #565656;
      }
    }
    .copy-icon {
      .material-symbols-outlined {
        font-size: dpi(2.2rem);
        color: #0571b0;
        cursor: pointer;
      }
    }
  }

  .form-footer {
    margin-top: dpi(4rem);
    display: flex;
    flex-direction: column;
    row-gap: dpi(3rem);
    margin-bottom: 20px;
  }
}
</style>
